<template>
	<el-card shadow="hover" v-loading="loading">
		<el-form :model="queryParams" ref="queryFormRef" :inline="true">
			<el-form-item label="设置默认经理" prop="title">
				<el-select
					v-model="queryParams.user_id"
					filterable
					remote
					clearable
					placeholder="请选择用户"
					:remote-method="remoteMethodUsers"
					:loading="loading"
					@clear="onDefaultManagerClear"
				>
					<el-option v-for="item in UsersOptions" :key="item.id" :label="item.nickname + item.mobile" :value="item.id"> </el-option>
				</el-select>
				<span>（请不要随意变动，以免引起数据混乱）</span>
			</el-form-item>
		</el-form>
		<div class="btn-group">
			<el-button type="primary" @click="onSubmit" :loading="submitLoading">确定</el-button>
		</div>
	</el-card>
</template>

<script lang="ts">
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref, toRefs } from 'vue';
import { selectDefaultManager, setDefaultManager, selectDefaultManagerInfo } from '/@/api/admin/index';
export default {
	name: 'systemDefaultManager',
	components: {},
	setup() {
		const queryFormRef = ref(null);
		const state = reactive({
			queryParams: {
				user_id: '',
			},
			loading: false,
			UsersOptions: [],
			submitLoading: false,
		});
		onMounted(() => {
			getList();
		});
		/********** 点击事件(on开头) **********/
		// 清空查询用户
		const onDefaultManagerClear = () => {
			_selectDefaultManager({});
		};
		//设置默认经理
		const onSubmit = () => {
			state.submitLoading = true;
			_setDefaultManager({ user_id: state.queryParams.user_id });
		};
		/********** 方法事件 **********/
		const getList = () => {
			state.loading = true;
			_selectDefaultManagerInfo({});
		};
		const remoteMethodUsers = (val: any) => {
			if (val) {
				_selectDefaultManager({ mobile: val });
			} else {
				return false;
			}
		};

		/******************网络请求*****************/
		//查询用户
		const _selectDefaultManager = (_data: any) => {
			selectDefaultManager(_data)
				.then((res: any) => {
					console.log(res);
					state.UsersOptions = res.data.list;
				})
				.catch((err) => {
					console.log(err);
				});
		};
		//查看默认经理
		const _selectDefaultManagerInfo = (_data: any) => {
			selectDefaultManagerInfo(_data)
				.then((res: any) => {
					state.queryParams.user_id = res.data.info.id;
					state.loading = false;
					Object.keys(res.data.info).length ? _selectDefaultManager({ mobile: res.data.info.mobile }) : _selectDefaultManager({});
				})
				.catch((err) => {
					state.loading = false;
					console.log(err);
				});
		};
		//设置默认经理
		const _setDefaultManager = (_data: any) => {
			setDefaultManager(_data)
				.then((res: any) => {
					console.log(res);
					ElMessage.success('操作成功');
					getList();
					state.submitLoading = false;
				})
				.catch((err) => {
					state.submitLoading = false;
					console.log(err);
				});
		};

		return {
			queryFormRef,
			onSubmit,
			getList,
			remoteMethodUsers,
			onDefaultManagerClear,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped>
.btn-group {
	width: 100%;
	display: flex;
	justify-content: flex-end;
}
</style>
